<template>
  <div id=''>
    <h1>Pinia</h1>
    <p> {{ counterStore.count }}</p>
    <p>{{ counterStore.name }}</p>
    <p>{{ counterStore.doubleCount }}</p>
    <p>{{ counterStore.doublePlusone }}</p>
    <button @click="counterStore.increment">count++</button>
    <!-- 组合式内无法使用$reset重置方法 -->
    <button @click="counterStore.$reset">重置为初始状态</button>
    <button @click="counterStore.reset">重置为初始状态</button>
    <button @click="counterStore.$patch({ count: 10, name: 'Jiuniangzi' })">修改state的count和name</button>
    <button
      @click="counterStore.$state = { count: 20, name: 'Jiuniangzi', isAdmin: false, items: [], hasChanged: false }">替换state的count和name</button>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'pinia',
}
</script>

<script lang='ts' setup>
import { ref } from 'vue';
import { useStore } from '@/stores/index';
const counterStore = useStore();
console.log(counterStore);

</script>


<style lang='scss' scoped></style>
